<template>
  <div>
    <el-upload
      action="#"
      list-type="picture-card"
      :auto-upload="true"
      :on-change="handlechange"
      :before-upload="handleUpload"
      :on-remove="handleRemove"
      :file-list="fileList"
    >
      <el-button size="small" plain type="primary">{{ btnName }}</el-button>
    </el-upload>
  </div>
</template>

<script>
import { uploadFile, getPolicy } from "@/api/upload";
export default {
  name: "HzImgUpload",
  props: {
    urls: {
      type: String,
      default: "",
    },
    fileType: {
      type: String,
      default: "common",
    },
    btnName: {
      type: String,
      default: "选择文件",
    },
    maxSize: {
      type: Number,
      default: 5,
    },
  },
  data() {
    return {
      originalFileList: [],
    };
  },
  watch: {},
  computed: {
    fileList: {
      get: function () {
        //必须有返回值，用来获取属性，称为get函数
        if (!this.urls) {
          return [];
        }
        let result = this.urls.split(",");
        let fileList = [];
        for (let i = 0; i < result.length; i++) {
          let url = result[i];
          if (url.indexOf("?") != -1) {
            url = url.split("?")[1];
          }
          let segs = url.split("/");
          let fileName = segs[segs.length - 1];
          let obj = {
            name: fileName,
            url: result[i],
          };
          fileList.push(obj);
        }
        return fileList;
      },
      set: function (val) {
        this.originalFileList = val;
        console.log(JSON.stringify(val));
      },
    },
  },

  created() {},
  methods: {
    handleInput() {
      this.$emit("update:urls", this.urls);
    },
    handleRemove(file, fileList) {
      this.originalFileList = fileList;
      let urls = fileList.map((item) => item.url).join(",");
      this.$emit("update:urls", urls);
    },

    handlechange(file, fileList) {
      // this.originalFileList = fileList;
      // let urls = fileList.map(item => item.url).join(',');
      // this.$emit('update:urls', urls)
    },

    handleUpload(file) {
      if (file.type) {
        const notBig = file.size / 1024 / 1024 < this.maxSize;
        if (!notBig) {
          this.$message.error("图片大小不能超过" + this.maxSize + "MB!");
          return;
        }

        getPolicy(file.name, this.fileType).then((response) => {
          let signedUrl = response.data.signedUrl;
          let downloadUrl = response.data.downloadUrl;
          uploadFile(file, signedUrl)
            .then((r) => {
              let obj = {
                name: file.name,
                url: downloadUrl,
              };
              this.originalFileList.push(obj);
              let urls = this.originalFileList
                .map((item) => item.url)
                .join(",");
              this.$emit("update:urls", urls);
              // this.$notify({
              //     title: "成功",
              //     message: "上传成功",
              //     type: "success",
              //     duration: 2000,
              // });
            })
            .catch((error) =>
              //console.log('error', error)
              this.$message.error(error)
            );
        });
      }
      return false;
    },
  },
};
</script>
